JavaScript'i Optional Chaining: Ohutu ja Elegantne Juurdepääs Omadustele

Sügavalt pesastatud objektide omaduste keerulises võrgustikus navigeerimine JavaScriptis võib sageli tunduda nagu miiniväljal kõndimine. Üksainus puuduv omadus võib esile kutsuda kardetud vea „Cannot read property 'x' of undefined”, mis peatab teie rakenduse hetkega. Traditsioonilised meetodid, mis kontrollivad null- või undefined-väärtuste olemasolu enne igale omadusele juurdepääsu, võivad viia sõnaohtra ja kohmaka koodini. Õnneks pakub JavaScript elegantsemat ja lühemat lahendust: optional chaining.

Mis on Optional Chaining?

Optional chaining, mida tähistab ?. operaator, pakub võimalust juurde pääseda objekti omadustele, mis võivad olla null või undefined, ilma viga tekitamata. Selle asemel, et ahelas nullilähedase (null või undefined) väärtuse ilmnemisel viga visata, tagastab see lihtsalt undefined. See võimaldab teil turvaliselt juurde pääseda sügavalt pesastatud omadustele ja käsitleda võimalikke puuduvaid väärtusi sujuvalt.

Mõelge sellest kui turvalisest navigaatorist oma objektistruktuuride jaoks. See võimaldab teil omadusi „aheldada” ja kui mõni omadus on ahelas puudu (on null või undefined), lühistab ahel end ja tagastab vea tekitamata undefined.

Kuidas see töötab?

Operaator ?. paigutatakse omaduse nime järele. Kui operaatorist vasakul oleva omaduse väärtus on null või undefined, hindab avaldis kohe väärtuseks undefined. Vastasel juhul jätkub omadusele juurdepääs tavapäraselt.

Vaatleme järgmist näidet:

            const user = {
  profile: {
    address: {
      city: "London"
    }
  }
};

// Ilma optional chaining'uta võib see visata vea, kui user.profile või user.profile.address on undefined
const city = user.profile.address.city; // London

// Optional chaining'u abil saame ohutult linnale juurde pääseda isegi siis, kui profiil või aadress puudub
const citySafe = user?.profile?.address?.city; // London

const userWithoutAddress = {
  profile: {},
};

const citySafeUndefined = userWithoutAddress?.profile?.address?.city; // undefined (viga ei teki)

            

              
                Copy
              
            
          

Esimeses näites saame nii optional chaining'uga kui ka ilma selleta tulemuseks „London”, sest kõik omadused on olemas.

Teises näites on userWithoutAddress.profile olemas, kuid userWithoutAddress.profile.address mitte. Ilma optional chaining'uta põhjustaks juurdepääs userWithoutAddress.profile.address.city vea. Optional chaining'u abil saame tulemuseks undefined ilma veata.

Optional Chaining'u kasutamise eelised

• Parem koodi loetavus: Kaotab vajaduse sõnaohtrate null-kontrollide järele, muutes teie koodi puhtamaks ja lihtsamini mõistetavaks.
• Vähem standardkoodi: Lihtsustab keerulist omadustele juurdepääsu loogikat, vähendades kirjutatava koodi hulka.
• Tõhusam vigade ennetamine: Hoiab ära ootamatud vead, mis on põhjustatud null- või undefined-väärtuste omadustele juurdepääsust.
• Robustsemad rakendused: Muudab teie rakenduse vastupidavamaks andmete ebajärjekindluse ja ootamatute andmestruktuuride suhtes.

Praktilised näited ja kasutusjuhud

1. API andmetele juurdepääs

API-st andmeid hankides ei ole teil sageli täielikku kontrolli andmestruktuuri üle. Mõned väljad võivad puududa või olla null-väärtusega. Optional chaining on hindamatu nende stsenaariumide sujuvaks käsitlemiseks.

            async function fetchData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  // Pääse ohutult ligi kasutaja e-posti aadressile, isegi kui 'email' omadus puudub
  const email = data?.profile?.email;
  console.log("Email:", email || "Email not available"); // Kasuta nullish coalescing'ut vaikeväärtuse andmiseks

  //Pääse ohutult ligi kasutaja aadressi linnale
  const city = data?.address?.city;
  console.log("City: ", city || "City not available");


}

fetchData(123); // Näidiskasutus

            

              
                Copy
              
            
          

2. Kasutajaeelistustega töötamine

Kasutajaeelistusi hoitakse sageli pesastatud objektides. Optional chaining aitab lihtsustada neile eelistustele juurdepääsu, isegi kui mõned eelistused pole määratletud.

            const userPreferences = {
  theme: {
    color: "dark",
  },
};

// Pääse ohutult ligi kasutaja fondi suurusele, pakkudes vaikeväärtust, kui see pole määratud
const fontSize = userPreferences?.font?.size || 16;
console.log("Font Size:", fontSize); // Väljund: 16 (vaikeväärtus)

const color = userPreferences?.theme?.color || "light";
console.log("Color Theme:", color); // Väljund: dark

            

              
                Copy
              
            
          

3. Sündmuste kuulajate (Event Listeners) käsitlemine

Sündmuste kuulajatega töötades võib teil tekkida vajadus pääseda juurde sündmuse objekti omadustele. Optional chaining aitab vältida vigu, kui sündmuse objekt või selle omadused pole määratletud.

            document.getElementById('myButton').addEventListener('click', function(event) {
  // Pääse ohutult ligi sihtelemendi ID-le
  const targetId = event?.target?.id;
  console.log("Target ID:", targetId);
});

            

              
                Copy
              
            
          

4. Rahvusvahelistamine (i18n)

Mitmekeelsetes rakendustes on sageli vaja pääseda juurde tõlgitud stringidele pesastatud objektist, mis põhineb kasutaja lokaadil. Optional chaining lihtsustab seda protsessi.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour",
    //farewell: "Au Revoir" - eemaldatud demonstreerimiseks
  }
};

const locale = "fr";

// Pääse ohutult ligi tõlgitud tervitusele
const greeting = translations?.[locale]?.greeting || "Hello";
console.log("Greeting:", greeting); // Väljund: Bonjour

//Pääse ohutult ligi tõlgitud hüvastijätule
const farewell = translations?.[locale]?.farewell || "Goodbye";
console.log("Farewell:", farewell); //Väljund: Goodbye (vaikimisi ingliskeelne)

            

              
                Copy
              
            
          

Optional Chaining koos funktsioonikutsetega

Optional chaining'ut saab kasutada ka funktsioonide ohutuks kutsumiseks, mis ei pruugi olemas olla. Kasutage selleks süntaksit ?.().

            const myObject = {
  myMethod: function() {
    console.log("Method called!");
  }
};

// Kutsu meetod ohutult välja, kui see on olemas
myObject?.myMethod?.(); // Väljund: Method called!

const myObject2 = {};

//Kutsu meetod ohutult välja, kuid seda pole olemas
myObject2?.myMethod?.(); // Viga ei teki, midagi ei juhtu

            

              
                Copy
              
            
          

Optional Chaining koos massiividele juurdepääsuga

Optional chaining'ut saab kasutada ka massiividele juurdepääsuks, kasutades süntaksit ?.[index]. See on kasulik töötades massiividega, mis võivad olla tühjad või mitte täielikult täidetud.

            const myArray = ["apple", "banana", "cherry"];

//Pääse ohutult ligi massiivi elemendile
const firstElement = myArray?.[0]; // "apple"

const myArray2 = [];

//Pääse ohutult ligi massiivi elemendile, tulemuseks on undefined.
const firstElement2 = myArray2?.[0]; // undefined

const secondElement = myArray?.[10]; // undefined (viga ei teki)

            

              
                Copy
              
            
          

Optional Chaining'u kombineerimine Nullish Coalescing'uga

Optional chaining töötab sageli käsikäes nullish coalescing operaatoriga (??). Nullish coalescing operaator pakub vaikeväärtust, kui operaatori vasakpoolne külg on null või undefined. See võimaldab teil pakkuda varuväärtusi, kui omadus puudub.

            const user = {};

// Pääse ohutult ligi kasutaja nimele, pakkudes vaikeväärtust, kui see pole määratud
const name = user?.profile?.name ?? "Unknown User";
console.log("Name:", name); // Väljund: Unknown User

            

              
                Copy
              
            
          

Selles näites, kui user.profile või user.profile.name on null või undefined, omistatakse muutujale name väärtus „Unknown User”.

Veebilehitsejate ühilduvus

Optional chaining on JavaScripti suhteliselt uus funktsioon (tutvustatud ECMAScript 2020-s). Seda toetavad kõik kaasaegsed veebilehitsejad. Kui peate toetama vanemaid veebilehitsejaid, võib teil olla vaja kasutada transpilerit nagu Babel, et teisendada oma kood ühilduvaks JavaScripti versiooniks.

Piirangud

• Optional chaining'ut saab kasutada ainult omadustele juurdepääsuks, mitte väärtuste määramiseks. Seda ei saa kasutada määramisoperaatori vasakul poolel.
• Liigne kasutamine võib varjata potentsiaalseid vigu. Kuigi käitusaegsete erandite vältimine on hea, on siiski oluline mõista, miks mõni omadus võib puududa. Kaaluge logimise või muude silumismehhanismide lisamist, et aidata tuvastada ja lahendada aluseks olevaid andmeprobleeme.

Parimad praktikad

• Kasutage seda, kui te pole kindel, kas omadus on olemas: Optional chaining on kõige kasulikum andmeallikatega tegelemisel, kus omadused võivad puududa või olla null-väärtusega.
• Kombineerige seda nullish coalescing'uga: Kasutage nullish coalescing operaatorit (??), et pakkuda vaikeväärtusi, kui omadus puudub.
• Vältige liigset kasutamist: Ärge kasutage optional chaining'ut valimatult. Kasutage seda ainult siis, kui see on vajalik, et vältida potentsiaalsete vigade varjamist.
• Dokumenteerige oma koodi: Dokumenteerige selgelt, miks te kasutate optional chaining'ut ja milline on oodatav käitumine, kui omadus puudub.

Kokkuvõte

JavaScripti optional chaining operaator on võimas tööriist puhtama, ohutuma ja robustsema koodi kirjutamiseks. Pakkudes lühikest viisi potentsiaalselt puuduvatele omadustele juurdepääsuks, aitab see vältida vigu, vähendada standardkoodi ja parandada koodi loetavust. Mõistes, kuidas see töötab ja järgides parimaid praktikaid, saate optional chaining'ut kasutada vastupidavamate ja hooldatavamate JavaScripti rakenduste loomiseks.

Võtke optional chaining oma projektides kasutusele ja kogege ohutu ja elegantse omadustele juurdepääsu eeliseid. See muudab teie koodi loetavamaks, vähem veaohtlikuks ja lõppkokkuvõttes lihtsamini hooldatavaks. Head programmeerimist!